<template>
  <div class="md:flex">
    <Card
      size="small"
      :loading="loading"
      title="健康标签"
      class="md:w-4/4 w-full !md:mt-0 !mt-4 cursor-pointer"
      :canExpan="false"
    >
      <div class="py-4 px-4 flex justify-between">
        <!-- 显示去重后的前4个标签 -->
        <div class="flex" v-for="(tag, index) in uniqueTags" :key="index">
          <div class="icon-text">{{ tag }}</div>
        </div>
        <!-- 不足4个时补充空标签占位 -->
        <div class="flex" v-for="index in 4 - uniqueTags.length" :key="'empty-' + index">
          <div class="icon-text">暂无标签</div>
        </div>
      </div>
      <template #extra>
        <a href="#" style="color: #1951be">@协作网</a>
      </template>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, defineProps, watch } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { Card } from 'ant-design-vue';
  import { useGo } from '/@/hooks/web/usePage';
  import { BasicInformation } from '/@/api/information/basicInformation';

  interface GrowCardItem {
    icon: string;
    title: string;
    value: number;
    total: number;
    color: string;
    action: string;
    url: string;
  }
  interface PropTypes {
    peopleInfo?: BasicInformation;
  }
  const loading = ref(true);
  const growCardList = ref<GrowCardItem[]>();
  const go = useGo();
  const p = defineProps<PropTypes>();
  const uniqueTags = ref<string[]>([]); // 存储去重后的标签

  // 处理标签去重逻辑
  const processTags = () => {
    if (p.peopleInfo?.biaoQian) {
      // 分割标签并去重
      const tags = p.peopleInfo.biaoQian.split('|')
        .filter(tag => tag.trim() !== '') // 过滤空字符串
        .filter((tag, index, self) => self.indexOf(tag) === index); // 去重
      
      // 取前4个标签
      uniqueTags.value = tags.slice(0, 4);
    } else {
      uniqueTags.value = [];
    }
  };

  onMounted(() => {
    const list: GrowCardItem[] = [
      {
        title: '近期健康报告',
        icon: 'visit-count|svg',
        value: 1999,
        total: 120000,
        color: 'green',
        action: '时',
        url: '/desktop/workbench',
      },
    ];
    growCardList.value = list;
    setTimeout(() => {
      loading.value = false;
      processTags(); // 初始化处理标签
    }, 500);
  });

  // 监听peopleInfo变化，实时更新标签
  watch(() => p.peopleInfo, () => {
    processTags();
  }, { deep: true });

  function navPage(url: string) {
    if (!url || url === '') {
      return;
    }
    if (url.indexOf('://') != -1) {
      window.open(url);
    } else {
      go(url);
    }
  }
</script>
<style lang="less" scoped>
  /* 样式保持不变 */
  .icon-text {
    position: relative;
    padding: 12px 20px;
    background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
    color: #1e293b;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    min-width: 90px;
    box-shadow:
      0 4px 15px rgba(59, 130, 246, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    letter-spacing: 0.3px;
    border: 1px solid rgba(59, 130, 246, 0.2);

    &::before {
      content: '';
      position: absolute;
      top: 1px;
      left: 1px;
      right: 1px;
      height: 50%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
      border-radius: 24px 24px 12px 12px;
      pointer-events: none;
    }

    &:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow:
        0 8px 25px rgba(59, 130, 246, 0.25),
        0 4px 15px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      border-color: rgba(59, 130, 246, 0.4);
    }

    .flex:nth-child(1) & {
      background: linear-gradient(145deg, #fef2f2 0%, #fee2e2 50%, #fef2f2 100%);
      color: #dc2626;
      border-color: rgba(220, 38, 38, 0.2);
      box-shadow:
        0 4px 15px rgba(220, 38, 38, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

      &:hover {
        box-shadow:
          0 8px 25px rgba(220, 38, 38, 0.25),
          0 4px 15px rgba(0, 0, 0, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border-color: rgba(220, 38, 38, 0.4);
      }
    }

    .flex:nth-child(2) & {
      background: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 50%, #f0fdf4 100%);
      color: #16a34a;
      border-color: rgba(22, 163, 74, 0.2);
      box-shadow:
        0 4px 15px rgba(22, 163, 74, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

      &:hover {
        box-shadow:
          0 8px 25px rgba(22, 163, 74, 0.25),
          0 4px 15px rgba(0, 0, 0, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border-color: rgba(22, 163, 74, 0.4);
      }
    }

    .flex:nth-child(3) & {
      background: linear-gradient(145deg, #faf5ff 0%, #f3e8ff 50%, #faf5ff 100%);
      color: #9333ea;
      border-color: rgba(147, 51, 234, 0.2);
      box-shadow:
        0 4px 15px rgba(147, 51, 234, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

      &:hover {
        box-shadow:
          0 8px 25px rgba(147, 51, 234, 0.25),
          0 4px 15px rgba(0, 0, 0, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
        border-color: rgba(147, 51, 234, 0.4);
      }
    }
  }

  .py-4.px-4.flex.justify-between {
    gap: 16px;
    align-items: center;

    .flex {
      position: relative;

      &:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -8px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 20px;
        background: linear-gradient(180deg, transparent 0%, #e2e8f0 50%, transparent 100%);
      }
    }
  }
</style>